<template>
    <div class="chart-con">
      <el-card class="box-card chart-card">
        <div slot="header" class="clearfix">
          <span>空气湿度</span>
        </div>
        <div class="chartArea" ref="chart1"></div>
      </el-card>
      <el-card class="box-card chart-card">
        <div slot="header" class="clearfix">
          <span>光照</span>
        </div>
        <div class="chartbeam" ref="chart2"></div>
      </el-card>
      <el-card class="box-card chart-card">
        <div slot="header" class="clearfix">
          <span>气压</span>
        </div>
        <div class="chartpressure" ref="chart3"></div>
      </el-card>
      <el-card class="box-card chart-card">
        <div slot="header" class="clearfix">
          <span>土壤湿度</span>
        </div>
        <div class="chartsoil" ref="chart4"></div>
      </el-card>
    </div>
</template>

<script>
import { $sensorCount} from "@/api/index.js";
export default {
  name: "Chart",
  mounted() {
    this.getSensor();
  },
  methods: {
    getSensor() {
      $sensorCount().then((res) => {
        console.log(149, res);
        this.draw(res.data.data);
      });
    },
    draw(data) {
      let chart1 = this.$echarts.init(this.$refs.chart1);
      let chart2 = this.$echarts.init(this.$refs.chart2);
      let chart3 = this.$echarts.init(this.$refs.chart3);
      let chart4 = this.$echarts.init(this.$refs.chart4);
      var option1 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.air,
            type: "line",
            smooth: true,
          },
        ],
      }
      var option2 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.beam,
            type: 'bar'
          }
        ]
      };
      var option3 = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: data.pressure
          }
        ]
      };
      var option4 = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.soil,
            type: "line",
            smooth: true,
          },
        ],
      }
      chart1.setOption(option1);
      chart2.setOption(option2);
      chart3.setOption(option3);
      chart4.setOption(option4);
    }
  },
}
</script>

<style scoped lang="scss">
.chart-con {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .chart-card {
    width: 45%;
    flex-grow: 1;
  }

  .chart-card:nth-of-type(1),
  .chart-card:nth-of-type(3) {
    margin-right: 10px;
  }

  .chart-card:nth-of-type(1),
  .chart-card:nth-of-type(2) {
    margin-bottom: 10px;
  }

  .chartArea ,.chartbeam{
    height: 200px;
  }

  .chartpressure ,.chartsoil{
    height: 400px;
  }
  .chartpressure canvas{
    width: 400px;
    height: 200px;
  }
}
</style>